<script setup>

import {Refresh, Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import axios from "axios";

const formLabelWidth = ref('140px');
let tableData=ref([]);
let dialogFormVisibleAdd=ref(false);
let str1=ref("");
let dialogFormVisibleEdit=ref(false);//修改弹窗
// 存储用户选择的文件
const selectedFile = ref(null);
// 存储上传成功后的 URL
const uploadedUrl = ref('');
// 存储错误信息
const errorMessage = ref('');
const deleteIndex=ref(null);
const EditIndex=ref(null);
const dialogFormVisibleDel=ref(false);
// 存储选择的id
let arrayData=ref([]);
let dialogFormVisibleDel1=ref(false);
// 搜索内容
let title=ref("");
let searchContent=ref("");
// 分页
let total=ref(1000);
let  currentPage=ref(1);
let pageSize=ref(7);

// 分页
const handleCurrentChange=(pageNum)=>{
  currentPage.value=pageNum;
  suaxin();

}








let form=ref({

  questionId:null,
  questionTitle:"",
  questionContent:"",
  publishTime:"",
  memberId:1
})
// 刷新
const suaxin=()=>{
  axios.get("/psychologyquestion/fenye",{
    params:{
      pageNum: currentPage.value,
      pageSize: pageSize.value

    }


  })
      .then((res)=>{
            console.log(res.data.data);
            tableData.value=res.data.data.list;
            total.value=res.data.data.total;
            console.log(res.data.data);



          }
      )
      .catch((err)=>{
        console.log(err);
      })


}



// 加载数据
onMounted(()=>{
  axios.get("/psychologyquestion/fenye",{
    params:{
      pageNum: currentPage.value,
      pageSize: pageSize.value

    }


  })
      .then((res)=>{
            console.log(res.data.data);
            tableData.value=res.data.data.list;
            total.value=res.data.data.total;
            console.log(res.data.data);



          }
      )
      .catch((err)=>{
        console.log(err);
      })


})

const addBuyCourse1=()=>{
  str1.value="添加";

  dialogFormVisibleAdd.value=true;
}



const  cancle=()=>{
  form.value.content=null;
  form.value.imageUrl="";
  form.value.title="";
  dialogFormVisibleAdd.value= false


}
// 清空
const qingkong=()=>{

  form.value.questionTitle="";
  form.value.questionContent="";
  form.value.memberId=null;


}
// 确定
const sumbit=()=>{

  axios.post("/psychologyquestion/bufen",{
    questionTitle:form.value.questionTitle,
    questionContent:form.value.questionContent,

  },{
    headers: {"Content-Type": "multipart/form-data"}
  })
      .then((res)=>{
            suaxin();
            console.log(res.data);
          }
      )
      .catch((err)=>{
        alert(err);
      })

  // form.value.assessmentId=null;
  // form.value.image="";
  // form.value.assessmentNum=null;
  // form.value.consultantId=null
  // form.value.title="";
  qingkong();

  dialogFormVisibleAdd.value= false

}
// 删除
const deleteBuyCourse1=(index)=>{
  console.log(index.questionId);
  deleteIndex.value=index.questionId;

  dialogFormVisibleDel.value=true;



}
const deleteBuyCourse2=()=>{
  axios.delete("/psychologyquestion",{
    params:{
      id:deleteIndex.value

    }


  })
      .then((res)=>{
        console.log(res.data.data);
        suaxin();
        dialogFormVisibleDel.value=false;
      })
      .catch((err)=>{
        console.log(err);
        alert(err);
      })
}
// 修改
const changeBuyCourse1=(index)=>{
  dialogFormVisibleEdit.value=true;
  EditIndex.value=index.questionId;
  console.log( EditIndex.value);
  for (let i=0;i<tableData.value.length;i++){
    if(tableData.value[i].questionId===EditIndex.value){
      form.value.questionTitle=tableData.value[i].questionTitle;
      // form.value.questions=tableData.value[i].questions;
      form.value.questionContent=tableData.value[i].questionContent;
      break;

    }

  }
  console.log(form.value);


}
// 修改取消
const cancle1=()=>{
  dialogFormVisibleEdit.value=false;

}

const sumbitEdit=()=>{
  console.log(form.value);

  axios.put("/psychologyquestion",{

    questionId:EditIndex.value,
    questionTitle:form.value.questionTitle,
    questionContent:form.value.questionContent,


  },{
    headers: {"Content-Type": "multipart/form-data"}

  })
      .then((res)=>{
            console.log(res.data);
            suaxin();



          }
      )
      .catch((err)=>{
        console.log(err);
        alert(err);
      })
  qingkong();
  dialogFormVisibleEdit.value=false;



}
const handleSelectionChange=(selection)=>{
  console.log(selection);
  let arr=ref([]);
  for (let i=0;i<selection.length;i++){
    arr.value.push(selection[i].questionId);

  }
  arrayData.value=arr.value;


}
// 多个删除
const deketemany1=()=>{


  console.log(arrayData.value);
  axios.delete("/psychologyquestion/many",{
    data: arrayData.value,

  })
      .then((res)=>{
        suaxin();
        console.log(res.data);

      })
      .catch((err)=>{
        console.log(err);
        alert(err);
      })
  dialogFormVisibleDel1.value=false;



}

const deketemany=()=>{
  dialogFormVisibleDel1.value=true;
}
// 搜索
const search=()=>{
  axios.get("/psychologyquestion/mohu",{
    params:{
      questionTitle:title.value,
      questionContent:searchContent.value,
    }
  })
      .then((res)=>{
        tableData.value=res.data.data;
        title.value="";
        searchContent.value="";

      })
      .catch((err)=>{
        console.log(err);
        alert(err);
      })

}
const resetSearch=()=>{
  currentPage.value=1;
  suaxin();
}

</script>

<template>


  <div class="top">
    心理知识名称 <el-input v-model="title" style="width: 240px" placeholder="请输入心理知识名称" />
    心理知识内容 <el-input v-model="searchContent" style="width: 240px" placeholder="请输入心理知识内容" />

    <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>

    <el-button type="warning" style="margin-left: 20px" @click="resetSearch" :icon="Refresh">重置</el-button>
  </div>


  <div class="table">

    <div class="tar">
      <el-button type="primary" plain @click="addBuyCourse1">添加</el-button>
      <el-button type="danger" plain @click="deketemany">批量删除</el-button>
    </div>

    <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 1200px">
      <el-table-column type="selection" width="55" />
      <el-table-column property="questionId" label="问题编号" width="180" />
      <el-table-column property="questionTitle" label="问题标题"  width="180" />
      <el-table-column property="questionContent" label="问题内容" width="240" show-overflow-tooltip />
      <el-table-column property="publishTime" label="提交时间" width="180" />
      <el-table-column property="memberId" label="发布问题者id" width="180" />

      <el-table-column property="" label="操作" width="180" >
        <template #default="scope">
          <el-button type="warning" round @click="changeBuyCourse1(scope.row)">修改</el-button>
          <el-button type="danger" round @click="deleteBuyCourse1(scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!--    添加购买记录-->
    <el-dialog v-model="dialogFormVisibleAdd" :title="str1" width="500">
      <el-form :model="form">

        <el-form-item label="题目" :label-width="formLabelWidth">
          <el-input v-model="form.questionTitle" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="form.questionContent" autocomplete="off"  type="textarea" :rows="3" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary" @click="sumbit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--    修改-->
    <el-dialog v-model="dialogFormVisibleEdit" :title="str1" width="500">
      <el-form :model="form">

        <el-form-item label="题目" :label-width="formLabelWidth">
          <el-input v-model="form.questionTitle" autocomplete="off" />
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="form.questionContent" autocomplete="off" type="textarea" :rows="3" />
        </el-form-item>




      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancle1">取消</el-button>
          <el-button type="primary" @click="sumbitEdit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>



    <!---->
    <el-dialog v-model="dialogFormVisibleDel" title="删除信息" width="500" draggable>
      <span>确定要删除该记录吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleDel = false">取消</el-button>
          <el-button type="primary" @click="deleteBuyCourse2">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--    多个删除-->
    <el-dialog v-model="dialogFormVisibleDel1" title="删除信息" width="500" draggable>
      <span>确定要删除该记录吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleDel1 = false">取消</el-button>
          <el-button type="primary" @click="deketemany1">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-pagination
        :page-size="pageSize"
        :pager-count="10"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
    />
  </div>


</template>

<style scoped>

</style>